<template>
  <div>
    <el-dialog
      :title="dialogTitle"
      :visible.sync="dialogVisible"
      width="20%">

        <el-form :model="form" :rules="rules" ref="form1" :label-width="this.labelwidth">
            <slot name='dialogSlot'></slot>
        </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="save" :disabled="!dialogVisible">保 存</el-button>
      </div>
    </el-dialog>


    <el-row style="margin-top: 0.5rem;">
      <el-col :span="21">
      <el-button-group v-if="btns">
        <el-button type="primary" @click="add()" icon="el-icon-plus" plain :size="size">新增</el-button>
        <el-button type="primary" @click="edit()" icon="el-icon-edit" plain :disabled="!currentRow"  :size="size">修改</el-button>
        <el-button type="primary" @click="del()" icon="el-icon-delete"  plain :disabled="!currentRow"  :size="size">删除</el-button>
        <slot name='mybutton'></slot>
        <el-button type="success" @click="refreshbutton()" icon="el-icon-refresh" plain  :size="size">刷新</el-button>
      </el-button-group>
      </el-col>
      <el-col :span="3" v-if="btns">
         <el-input
             placeholder="请输入内容"
             prefix-icon="el-icon-search"
             v-model="queryParams.search" :size="size" clearable @change="searChange">
           </el-input>
      </el-col>
    </el-row>
  <el-row style="margin-top: 0.625rem;max-height: 65vh;overflow:auto;">
      <el-table
       border ref="singleTable" :data="array" v-loading="loading" highlight-current-row  @current-change="handleCurrent" v-bind="tableAttrs" style="width: 100%" >

         <el-table-column v-for="items,idx in table" :key="idx" :property="items.field" :label="items.title"></el-table-column>
         <slot name='tableColumn'></slot>
      </el-table>
  </el-row>
  <el-row style="margin-top: 0.625rem;">
    <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="queryParams.page"
          :page-sizes="pageSize"
          :page-size="queryParams.limit"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
  </el-row>
  </div>
</template>

<script>
 import {mapState,mapMutations} from 'vuex';
  export default{
    computed:mapState(['anyParams']),
    props:{
      listPath:{
        type:String,
        required:true,
      },
      dialogTitle:{
        type:String,
        default:'编辑'
      },
      savePath:{
        type:String,
        required:true,
      },
      table:{
        type:Array,
        required:true,
      }
      ,
      rules:{
        type:Object,
        default:()=>{},
      },
      deletePath:{
        type:String,
        required:true,
      },
      pageSize:{
        type:Array,
        required:true,
      },
      dialogForm:{
        type:Object,
        default:()=>{}
      },
      tableAttrs:{
        type:Object
      },
      pageParams:{
        type:Object
      },
      btns:{
        type:Boolean,
        default:true
      },
      labelwidth:{
        type:String,
        default:'80px'
      }

    },
    data() {
      return {
        loading:false,
        currentRow:null,
        size:"small",
        array:null,
        queryParams:{
            limit:3,
            page:1,
            sort:'stuNo',
            order:'asc',
            search:''
        },
        form:{},
        dialogVisible:false,
        total:0,
        Params:{nini:123},
      }
    },
    methods:{
      ...mapMutations(['setAnyParams']),
      handleCurrent(row,column,event) {
        this.$emit('crrent-Row',row);
        this.currentRow = row;
      },
      add(){
        this.setAnyParams({});
        emptyObj(this.form);
        this.$emit('show-dialog',this.form);
        this.dialogVisible=true;
      },
      shuaxin(){

      }
      ,
      refreshbutton(){
        this.loading=true;
        this.refreshtable();
      },
      del(){
        this.$confirm('是否删除此条数据', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'info'
            }).then(() => {
              this.$ajax.post(this.deletePath,this.currentRow).then(res=>{
                var result=res.data;
                if(result.success){
                  this.$notify({
                    title: '提示',
                    message: '数据删除成功',
                    type: 'success',
                    position: 'bottom-right'
                  });
                  this.total--;
                  this.$emit('deleted',this.currentRow);
                  this.refreshtable();
                }
              }).catch(err=>{
                this.$message({
                  type: 'error',
                  message: '删除失败'
                });
              })
            }).catch(() => {
              this.$message({
                type: 'info',
                message: '已取消删除'
              });
            });
      },
      edit(){
        this.setAnyParams({});
        Object.assign(this.form, this.currentRow);
        this.$emit('show-dialog',this.form);
        this.dialogVisible=true;
      },
      save(){
        this.Params=this.anyParams;
        this.$refs.form1.validate(valid=>{
          if(valid){
            this.$ajax.post(this.savePath,Object.assign({},this.form,this.Params)).then(res=>{
              var result = res.data;
              if(result.success){
                this.dialogVisible=false;
                this.$emit('save-succ',this.form);
                this.refreshtable();
                this.$notify({
                  title: '提示',
                  message: '数据保存成功',
                  type: 'success',
                  position: 'bottom-right'
                });
              }
            }).catch(res=>{
               this.$message({
                    showClose: true,
                    message: '学号，用户名已被创建或网络连接失败...',
                    type: 'warning'
                 });
            })
          }
        })
      },
      searChange(){
        this.queryParams.page=1;
        this.refreshtable();
      },
      handleSizeChange(val) {
        this.queryParams.limit=val;
        this.refreshtable();
      },
      handleCurrentChange(val) {
         this.queryParams.page=val;
         this.refreshtable();
      },
      refreshtable(){
        if(this.queryParams.limit*(this.queryParams.page-1)>=this.total&&this.queryParams.page>1){
          this.queryParams.page--;
        }
        this.$ajax.post(this.listPath,this.queryParams).then(res=>{
               var result=res.data;
               if(result.success){
                 // this.stus=result.data;
                 this.array=result.data.rows;
                 this.total=result.data.total;
                 this.currentRow=null;
                 setTimeout(() => {
                   this.loading=false;
                 }, 250)
               }
             }).catch(res=>{})
      },
    },
    created() {
      this.form=this.dialogForm;
      this.queryParams=this.pageParams;
      this.refreshtable();
    }
  }

  function emptyObj(obj){
    if(obj.file){
      console.log(11)
      obj.file=""
    }
    for( var key in obj){
      var o = obj[key];
      if(o instanceof Object){
        emptyObj(o);
      }else{
        obj[key]='';
      }
    }
  }
</script>

<style>
</style>
